<template>
  <div>
    <m-header :title="iNowTitle" :linkTitle="linkTitle" :isLink="true"></m-header>
    <div class="customer">
      <div class="customer_list">
        <div class="nav">
          <div class="exchange_tab">
            <ul>
              <li :class="type == '4'?'active':''" @click="getList('4')">未兑换</li>
              <li :class="type == '3'?'active':''" @click="getList('3')">已兑换</li>
              <li :class="type == '2'?'active':''" @click="getList('2')">已失效</li>
            </ul>
          </div>
        </div>
        <div class="tab_header">
          <div v-if=" tabList.length == 0 ">
            <section class="bind_card_success  pd_t60" v-if="type == 4">
              <img class="success_money" src="../common/images/money_img.png">
              <p class="bind_card_message">哦噢~小主可用的兑换券都没有，快去抢几张</p>
              <p class="bind_card_small_message">联系商务了解渠道兑换券获取条件</p>
              <router-link to="/bind" tag="a" class="btn_big">绑定兑换卡</router-link>
            </section>
            <section class="bind_card_success  pd_t60 none" v-if="type == '3' || type == '2'">
              <div style="text-align:center">暂无数据</div>
            </section>
          </div>

          <div class="exchange_list" v-else>
            <div class="exchange_div_blue" v-for="item in tabList">
              <div class="exchange_first_div">
                <p class="exchange_title">{{item.smsNum}}条</p>
                <p class="exchange_detail">限用产品：{{item.event_name}}</p>
                <p class="exchange_detail" v-if="type == '4'">有效期至：{{item.end_date}}</p>
                <p class="exchange_detail" v-if="type== '3'">有效时间: {{item.exchange_date}} - {{item.expiry_date}}</p>
                <p class="exchange_detail" v-if="type == '2'">
                  过期时间：{{!item.expiry_date ? item.end_date : item.expiry_date}}</p>
                <p class="exchange_detail">兑换卡号:{{item.channelNum}}</p>
                <p class="exchange_detail">兑换码:{{item.couponNum}}</p>
              </div>
              <div class="exchange_last_div">
                <p class="last_detail">剩余&nbsp;<font>{{item.remain_qty}}</font>&nbsp;条</p>
              </div>
            </div>
          </div>
          <Page :total="totalCount" show-total :page-size="listData.page.pageRowCount" size="small" v-if="totalCount > 0"
                @on-change="handleChange"></Page>
        </div>
      </div>
    </div>
    <Copyright></Copyright>
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'base/m-header/m-header'
  import {ERR_OK} from 'config/config'
  import {Toast} from 'mint-ui'
  import 'mint-ui/lib/toast/style.css';
  import Copyright from 'base/copyright/copyright'
  import {Page} from 'iview'


  export default {
    data() {
      return {
        linkTitle: '绑定',
        iNowTitle: '我的兑换码',
        moneyObj: {},
        tabList: [],
        totalCount: 0,

        type: '4',
        listData: {
          page: {
            currentPage: 1,
            pageRowCount: 20
          }
        }
      }
    },
    created() {
      this.getCustomers();
    },
    methods: {
      getCustomers() {
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/coupon/queryChannelCoupon',
          data: {
            type: this.type,
            currentPage:this.listData.page.currentPage,
            pageRowCount:this.listData.page.pageRowCount
          }
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.moneyObj = res.data.data.result;
            this.tabList = res.data.data.result.list;
            this.totalCount = res.data.data.result.totalCount;

          } else {
            Toast('请求失败，请刷新')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      handleChange(index) {
        this.listData.page.currentPage = index;
        this.getCustomers();
      },
      getList(type) {
        this.type = type;
        this.listData.page.currentPage = 1;
        this.getCustomers();
      }
    },
    components: {
      MHeader,
      Copyright,
      Page
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  @import "~common/less/variable.less";

  .ivu-page.mini .ivu-page-total {
    display: block;
  }

  .ivu-page.mini .ivu-page-next, .ivu-page.mini .ivu-page-prev {
    min-width: 12px !important;
  }

  .nav {
    text-align: center;
  }

  .exchange_tab {
    position: relative;
    left: 0;
    border: 1px solid #2C3444;
    width: 390/@r;
    height: 52/@r;
    border-radius: 5/@r;
    display: inline-block;
    border-left: none;
    box-sizing: content-box;
    ul li {
      float: left;
      width: 130/@r;
      height: 100%;
      line-height: 52/@r;
      height: 52/@r;
      text-align: center;
      color: black;
      font-size: 22/@r;
      border-left: 1px solid #2a3141;
      box-sizing: border-box;
    }
    .active {
      background: #2C3444;
      color: white;
    }
  }

  .none{
    height: 5rem;
    line-height: 5rem;
    border: 1px solid #DBDEDF;
    border-radius: 0.1rem;
    box-shadow: 0px 0 0px #ccc, 0px 0 0px #ccc, 0 0px 0 #ccc, 0 2px 4px #ccc;
  }
</style>
